<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>附件列表</title>
    <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="../lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="../lib/gf/tree_common_grid.js"></script>
</head>
<script type="text/javascript">
    Ext.Loader.setConfig({enabled: true});

    Ext.Loader.setPath('Ext.ux', '/ext4/ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
        'Ext.ModelManager',
        'Ext.tip.QuickTipManager'
    ]);
    var win, searchForm;
    Ext.onReady(function () {

        Ext.define( 'ModelList', {
            extend: 'Ext.data.Model',
            fields: [
                '_id','title','code','image_file_id','file_size','update_at'
            ],
            idProperty: '_id'
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            pageSize: 20,
            model: 'ModelList',
            remoteSort: true,
            proxy: {
                type: 'ajax',
                url: '/picture/list',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty: 'count'
                },
                simpleSortMode: true
            },
            sorters: [
                {
                    property: '_id',
                    direction: 'DESC'
                }
            ]
        });

        searchForm = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            region: 'north',
            defaultType: 'textfield',
            layout: {type: 'table',columns:3},
            items: [
                {fieldLabel: '图片标题',name: 'title',allowBlank: true},
                {fieldLabel: '图片编号',name: 'code',allowBlank: true}
            ]
        });

        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            loadMask: true,
            region: 'center',
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            columns: [
                {text: "_id",dataIndex: '_id',hidden: true},
                {text: '图片标题',dataIndex: 'title',width:200},
                {text: '图片编号',dataIndex: 'code',width:200},
                {text: '上传时间',dataIndex: 'update_at',width:200},
                {text: '图片',dataIndex: 'code',width:100,
                    renderer:function(val){
                        var _url = "/picture/" + val;
                        return '<img style="width:100px;height:60px;" src="' + _url + '">';
                    }
                }
            ],
            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying {0} - {1} of {2}',
                emptyMsg: "没有数据！！！"

            }),
            tbar: [
                {
                    pressed: true,
                    text: '搜  索',
                    icon : '../img/search.png',
                    handler: doSearch
                },
                {
                    pressed: true,
                    text: "修  改",
                    icon : '../img/edit.png',
                    handler: function(){doEdit(grid,"/admin/image_manage/add.html","修改图片",800,400)}
                },
                {
                    pressed: true,
                    icon : '../img/add.png',
                    text: "添  加",
                    handler: function(){doAdd("/admin/image_manage/add.html","添加图片",800,400)}
                },
                {
                    pressed: true,
                    icon : '../img/delete.png',
                    text: "删  除",
                    handler: function(){doDelete(grid,"/picture/del",store)}
                }

            ]
        });


        var viewport = new Ext.Viewport({
                    layout: 'border',
                    renderTo: "topic-grid",
                    items: [searchForm,grid]}
        );

        function doSearch(){
            store.loadPage(1,{params:searchForm.getValues()});
        }
        // trigger the data store load
        store.on('beforeload',function(store, operation,eOpts){
            operation.params= searchForm.getValues();
        },this);
        store.loadPage(1);
        window.refresh = function(){
            store.loadPage(1);
        }

        window.closeWin = function(){
            win.hide();
        }

    });
</script>
<body>
<div id="topic-grid" style="height: 1024px;width:100%"></div>
<p>The js is not minified so it is readable. See <a href="panel.js">panel.js</a>.</p>
</body>
</html>